<script lang="tsx" setup>
import dayjs from 'dayjs';
import type { OssVO } from '@/service/types/system';
defineOptions({
  name: 'OssPreview'
});

const visible = defineModel<boolean>('visible', {
  default: false
});

interface Props {
  rowData: OssVO;
}
const props = defineProps<Props>();
</script>

<template>
  <div>
    <NModal v-model:show="visible" title="详情" preset="card" class="w-800px">
      <div class="flex-item-center flex flex-col flex-gap-2 flex-justify-center">
        <div class="flex-item-center h-300px flex flex-justify-center bg-zinc-1 p-10px">
          <NImage class="max-h-300px max-w-100%" :src="props.rowData.url" />
        </div>
        <div>
          <NDescriptions label-class="w-20%" bordered label-placement="left" :column="1">
            <NDescriptionsItem label="文件名">
              <div class="flex-item-center flex flex-row">
                <NEllipsis class="w-390px">
                  {{ props.rowData.fileName }}
                  <template #tooltip>{{ props.rowData.fileName }}</template>
                </NEllipsis>
                <NButton text class="font-size-5 color-primary">
                  <SvgIcon icon="iconoir:copy" />
                </NButton>
              </div>
            </NDescriptionsItem>
            <NDescriptionsItem label="ETag">
              <div class="flex-item-center flex flex-row">
                <NEllipsis class="w-390px">
                  {{ props.rowData.eTag ? props.rowData.eTag : '-' }}
                  <template #tooltip>{{ props.rowData.eTag ? props.rowData.eTag : '-' }}</template>
                </NEllipsis>
                <NButton text class="font-size-5 color-primary">
                  <SvgIcon icon="iconoir:copy" />
                </NButton>
              </div>
            </NDescriptionsItem>
            <NDescriptionsItem label="上传人">{{ props.rowData.createByName }}</NDescriptionsItem>
            <NDescriptionsItem label="上传时间">
              {{ dayjs(props.rowData.createTime).format('YYYY-MM-DD') }}
            </NDescriptionsItem>
            <NDescriptionsItem label="服务商">
              {{ props.rowData.service }}
            </NDescriptionsItem>
            <NDescriptionsItem label="后缀">{{ props.rowData.fileSuffix }}</NDescriptionsItem>
            <!-- <NDescriptionsItem label="文件大小" :span="2">322.57 KB(330,312 Byte)</NDescriptionsItem> -->
            <NDescriptionsItem label="URL">
              <div class="flex-item-center flex flex-row flex-gap-1">
                <NEllipsis class="w-400px">
                  {{ props.rowData.url }}
                  <template #tooltip>
                    {{ props.rowData.url }}
                  </template>
                </NEllipsis>
                <NButton text class="font-size-5 color-primary">
                  <SvgIcon icon="iconoir:copy" />
                </NButton>
              </div>
            </NDescriptionsItem>
          </NDescriptions>
        </div>
      </div>
    </NModal>
  </div>
</template>

<style lang="scss" scoped></style>
